<template>
  <custom-modal-page :visible.sync="visible">
    <div class="tensioning-detail-container">
      <div class="header" header="张拉详情">
        <a-button @click="closeModal()"> 返回 </a-button>
      </div>
      <div class="main" v-loading="loading">
        <div class="title">基本信息</div>
        <a-form-model ref="form" :model="form">
          <a-row :gutter="20" style="margin-right: 50px">
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
              <a-form-model-item label="工程名称">
                <a-input v-model="form.engineeringName" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
              <a-form-model-item label="桥梁名称">
                <a-input v-model="form.bridgeName" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
              <a-form-model-item label="梁号">
                <a-input v-model="form.componentParts" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
              <a-form-model-item label="梁型">
                <a-input v-model="form.beamType" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
              <a-form-model-item label="工艺">
                <a-input value="张拉" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
              <a-form-model-item label="张拉强度">
                <a-input v-model="form.concreteStrength" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
              <a-form-model-item label="张拉时间">
                <a-input v-model="form.trialDate" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
              <a-form-model-item label="张拉结果">
                <a-input
                  :value="
                    form.result == 0 ? '合格' : form.result == 1 ? '不合格' : ''
                  "
                  disabled
                ></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <div class="title">数据详情</div>
        <div class="table-container">
          <vxe-table
            ref="xTable"
            class="scrollbarStyle"
            height="440px"
            border
            align="center"
            show-overflow
            show-header-overflow
            show-footer-overflow
            show-footer
            row-id="id"
            :column-config="{ resizable: true }"
            :sort-config="{ trigger: 'cell' }"
            :scroll-x="{ gt: 10 }"
            :scroll-y="{ gt: 100, enabled: false }"
            :checkbox-config="{
              reserve: true,
            }"
            :data="tableData"
            :span-method="mergeRowMethod"
          >
            <vxe-column type="seq" width="80" title="序号"></vxe-column>
            <vxe-column
              :title="item.title"
              :field="item.key"
              :key="index"
              :min-width="item.width"
              show-overflow
              v-for="(item, index) in columns"
            >
              <template #default="{ row }">
                <div
                  v-if="item.key == 'result'"
                  :class="[checkResultClass(row.result), 'status-text']"
                >
                  {{ row[item.key] }}
                </div>
                <div v-else>{{ row[item.key] }}</div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </div>
  </custom-modal-page>
</template>

<script>
import { zlDetail } from "@/api/wisdom-beam/collect-app.js";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: "",
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      form: {},
      tableData: [],
      columns: [
        {
          title: "钢束编号",
          dataIndex: "steelBeamNo",
          key: "steelBeamNo",
          width: "120px",
        },
        {
          title: "张拉时间",
          dataIndex: "tensioningDate",
          key: "tensioningDate",
          width: "180px",
        },
        {
          title: "断面",
          dataIndex: "tensioningSection",
          key: "tensioningSection",
          width: "120px",
        },
        {
          title: "记录项目",
          dataIndex: "type",
          key: "type",
          width: "120px",
        },
        {
          title: "初始行程",
          dataIndex: "type0",
          key: "type0",
          width: "120px",
        },
        {
          title: "第二行程",
          dataIndex: "type1",
          key: "type1",
          width: "120px",
        },
        {
          title: "第三行程",
          dataIndex: "type2",
          key: "type2",
          width: "120px",
        },
        {
          title: "第三后行程",
          dataIndex: "type3",
          key: "type3",
          width: "120px",
        },
        {
          title: "终张行程",
          dataIndex: "type4",
          key: "type4",
          width: "120px",
        },
        {
          title: "总伸长量(mm)",
          dataIndex: "totalElongation",
          key: "totalElongation",
          width: "120px",
        },
        {
          title: "理论伸长量(mm)",
          dataIndex: "theoreticalElongation",
          key: "theoreticalElongation",
          width: "140px",
        },
        {
          title: "延伸误差量(%)",
          dataIndex: "extendError",
          key: "extendError",
          width: "140px",
        },
        {
          title: "张拉结果",
          dataIndex: "result",
          key: "result",
          width: "120px",
        },
      ],
    };
  },
  methods: {
    checkResultClass(result) {
      switch (result) {
        case "合格":
          return "normal";

        case "不合格":
          return "error";

        default:
          return "cancel";
      }
    },

    //合并规则条件
    setCondition(newRow = {}, column = {}, row = {}) {
      let { property } = column;
      let steelBeamNoFlag = newRow["steelBeamNo"] === row["steelBeamNo"];
      if (property == "totalElongation" || property == "tensioningDate") {
        return steelBeamNoFlag;
      } else {
        return steelBeamNoFlag;
      }
    },
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      //需要执行合并的key
      const fields = [
        "steelBeamNo",
        "tensioningDate",
        "tensioningSection",
        "totalElongation",
        "theoreticalElongation",
        "extendError",
        "result",
      ];
      const cellValue = row[column.property];
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (
          prevRow &&
          prevRow[column.property] === cellValue &&
          this.setCondition(prevRow, column, row)
        ) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (
            nextRow &&
            nextRow[column.property] === cellValue &&
            this.setCondition(nextRow, column, row)
          ) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },

    getDetail() {
      this.loading = true;
      zlDetail({
        zlId: this.id,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.form = result ?? {};
          this.tableData = result?.zlDetailListVos || [];
        })
        .catch((err) => {})
        .finally((_) => {
          this.loading = false;
        });
    },

    //返回
    closeModal() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
.tensioning-detail-container {
  height: 100%;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
  .flex();
  flex-direction: column;
  .header {
    padding: 15px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    .flex();
    flex-direction: column;
    .title {
      padding: 20px 30px;
      font-size: 18px;
      font-weight: bold;
      color: #525a5d;
    }
    .table-container {
      flex: 1;
      margin: 0px 30px 20px 30px;
      .status-text {
        border-radius: 4px;
        color: #fff;
        .flex();
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        font-size: 12px;
        width: 80px;
        &.normal {
          background: #4bc964;
        }
        &.error {
          background: #ff3f4a;
        }
        &.cancel {
          background: #f1f2f7;
          color: #aab0bc;
        }
      }
    }
  }
  //表单布局
  /deep/.ant-form-item {
    display: flex;
    margin-bottom: 12px;
    .ant-form-item-label {
      width: 150px;
      white-space: pre-wrap;
      display: flex;
      justify-content: flex-end;
      line-height: 20px;
      align-items: center;
      height: 36px;
      label {
        color: #999999;
      }
    }
    .check-item-select {
      height: 126px;
      .ant-select-selection__rendered {
        height: 126px;
        .ant-select-selection__placeholder {
          margin-top: -40px !important;
        }
      }
    }
    .ant-select {
      width: 100% !important;
      min-width: unset !important;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
